<template>
  <vol-box
    :lazy="true"
    :model.sync="model.box1"
    title="选择预定人"
    :height="400"
    :width="700"
  >
    <div class="container">
      <div>
        <VolHeader
          icon="md-apps"
          text=""
          style="margin-bottom: 10px; border: 0px"
        >
          <div slot="content"></div>

          <slot>
            <div>
              <Input
                style="width: 200px; margin-right: 10px"
                v-model.number="searchFields.UserName"
                placeholder="手机号"
                @input="load"
              />
              <Button type="info" ghost @click="load" style="margin-left: 20px"
                >查询</Button
              >
            </div>
          </slot>
        </VolHeader>

        <!-- table数据 -->
        <!-- :max-height="450" -->
        <vol-table
          ref="table"
          :loadKey="true"
          :columns="columns"
          :pagination-hide="false"
          :height="280"
          :url="url"
          :index="true"
          @rowClick="rowClick"
        ></vol-table>
      </div>
    </div>
    <div slot="footer">
      <Button type="success" @click="getForm">确定</Button>
      <Button type="info" @click="model.box1 = false">
        <Icon type="md-close" />关闭
      </Button>
    </div>
  </vol-box>
</template>
<script>
import VolTable from "@/components/basic/VolTable.vue";
import VolHeader from "@/components/basic/VolHeader.vue";
import VolForm from "@/components/basic/VolForm.vue";
import VolBox from "@/components/basic/VolBox.vue";
import data from "../../../views/builder/builderData";
export default {
  components: { VolTable, VolHeader, VolForm, VolBox },
  created() {},
  data() {
    return {
      title: "",
      model: {
        box2: false,
        box1: false,
      },
      formData: {
        volumeItemID: "",
        userID: "",
      },
      //查询条件字段
      searchFields: {
        CreateDate1: "",
        CreateDate2: "",
        UserName: "",
      },
      accountCode: "",
      viewModel: false, //点击单元格时弹出框
      url: "api/SmallUserArchives/GetSmallUserPageData", //后从加载数据的url
      columns: [
        {
          field: "id",
          title: "",
          type: "int",
          width: 90,
          hidden: true,
          readonly: true,
          require: true,
          align: "left",
        },
        {
          field: "name",
          title: "客人姓名",
          type: "string",
          width: 90,
          align: "left",
          sortable: true,
          align: "left",
        },
        {
          field: "phone",
          title: "客人手机",
          type: "string",
          width: 150,
          align: "left",
        },
        {
          field: "certificate_type",
          title: "证件类型",
          type: "int",
          width: 90,
          align: "left",
        },
        {
          field: "id_card",
          title: "证件号码",
          type: "datetime",
          width: 200,
          align: "left",
          sortable: true,
        },
      ],
    };
  },

  methods: {
    rowClick({ row, column, event }) {
      this.$refs.table.$refs.table.toggleRowSelection(row);
    },
    handlerKeyChange($ev) {
      if ($ev.keyCode === 48 || $ev.keyCode === 57) {
        console.log("跳到下一个");
        console.log(this.load());
      }
    },
    load() {
      //此处可以自定义查询条件,如果不调用的框架的查询，格式需要自己定义，
      //如果查询的是框架getPageData方法,需要指定格式,如:
      // let where={wheres:[{"name":"UserTrueName","value":"教兽",displayType:"text"}]};
      //console.log(this.accountCode)
      let where = {
        wheres: [
          //设置为like模糊查询
          {
            name: "phone",
            value: this.searchFields.UserName,
            displayType: "like",
          },
        ],
      };
      this.$refs.table.load(where);
    },

    del() {
      let rows = this.$refs.table.getSelected();
      if (rows.length == 0) {
        return this.$message.error("请先选中行");
      }
      this.$refs.table.delRow();
      //此处可以接着写删除后台的代码
    },
    async getForm() {
      let rows = this.$refs.table.getSelected();
      if (rows.length == 0) {
        return this.$message.error("请先选中行！");
      }
      // if (rows.length > 1) {
      //   return this.$message.error("只能选择1行数据！");
      // }
      //在另一个视图中操作此视图中的添加

      if (this.title == "mall_volumn") {
        //this.$message.error("缺人")
         
        if(rows.length < 2){
          var viIds = this.$store.getters.data().mall_volumnItemID;
            var volumnID = this.$store.getters.data().mall_volumnID;
            var userId = rows[0].id;
            if(viIds.length>1){
                var ok = true;
                for (let i = 0; i < viIds.length; i++) {
                  this.formData.volumeItemID = viIds[i];
                  this.formData.volumeID = volumnID;
                  this.formData.userID = userId;
                  let formData = {
                    mainData: this.formData,
                    detailData: null,
                    delKeys: null,
                  };
                await this.http
                    .post("/api/mall_volume_user/Add", formData, true)
                    .then((x) => {
                      if (!x.status) 
                        ok = false;
                      // this.refresh();
                    });
                }
                if(!ok){
                      this.$message.error("发券失败");
                    }
                  else {
                    this.$message.success("发券成功");
                  }

                this.model.box1 = false;
            }else{
                console.log(this.$store.getters.data().mall_volumnID);
                this.formData.volumeItemID = this.$store.getters.data().mall_volumnItemID;
                this.formData.volumnID = this.$store.getters.data().mall_volumnID;
                this.formData.userID = rows[0].id;
                let formData = {
                  mainData:this.formData,
                  detailData:null,
                  delKeys:null
                };
                this.http.post("/api/mall_volume_user/Add",formData,true).then(x=>{
                  if(!x.status) return this.$message.error(x.message);
                  this.$message.success(x.message);
                })
                this.model.box1 = false;
          }
        }else{
             var viIds = this.$store.getters.data().mall_volumnItemID;
            var volumnID = this.$store.getters.data().mall_volumnID;
            var userId = rows[0].id;
            if(viIds.length==rows.length){
                var ok = true;
                for (let i = 0; i < viIds.length; i++) {
                  this.formData.volumeItemID = viIds[i];
                  this.formData.volumeID = volumnID;
                  this.formData.userID = userId;
                  let formData = {
                    mainData: this.formData,
                    detailData: null,
                    delKeys: null,
                  };
                await this.http
                    .post("/api/mall_volume_user/Add", formData, true)
                    .then((x) => {
                      if (!x.status) 
                        ok = false;
                      // this.refresh();
                    });
                }
                if(!ok){
                      this.$message.error("发券失败");
                    }
                  else {
                    this.$message.success("发券成功");
                  }

                this.model.box1 = false;
            }else{
              return this.$message.error("券数量与发行人数量不符");
            }
        }
        
      } else {
        this.$store.getters.data().chooserows.bookingPhone = rows[0].phone;
        this.$store.getters.data().chooserows.bookingName = rows[0].name;
        this.$store.getters.data().chooserows.bookingIdCard = rows[0].id_card;
        this.$store.getters.data().chooserows.bookingType =
          rows[0].certificate_type;

        this.model.box1 = false;
      }
    },
    open(row) {
      this.title = row;
      //this.formData=row;
      //close.log(row);
      console.log(row);
      this.model.box1 = true;
    },
  },
};
</script>